<template>
	<view>

		<view class="OuterBox">

			<lazy-component v-for="(item, index) in pagesData" :key="index">
				<view>
					<template v-if="item.name == 'banner' && item.show">
						<w-banner :content="item.content" :styles="item.styles" />
					</template>
				</view>
				<view slot="skeleton" style="height: 20vh"></view>
			</lazy-component>


			<!-- <view class="banner_home">
				<u-image :lazy-load="true" :src="banner" width="100%" height="100%">
					<u-loading slot="loading"></u-loading>
				</u-image>
			</view>
		
			<view class="map_box">
				<view class="map_container">
					<maparea :arslist="false" ref="ref_map"
					@raddress="raddress"
					></maparea>
				</view>
				<view class="map_control">
					<view class="control_outer">
						<view class="location_rise origin FlexAlign">
							{{confirm_address ? confirm_address.taddress : '当前位置'}}
						</view>
						<view class="location_End origin color_End FlexAlign" @click="WhereTo">
							{{destination ? destination.address : '您想去哪儿？'}}
						</view>
					</view>

				</view>
			</view> -->
			<!--  -->
			<indexnav></indexnav>
			<!--  -->
			<!-- <view class="envelope_box FlexAlign">
				<view class="envelope_left">
					<view class="tit">
						推荐好友领现金
					</view>
					<view class="txt">
						最高可得现金100元
					</view>
					<view class="en_leftbtn FlexAlign">
						<view class="span FlexItem">
							立即推荐
						</view>
						<view class="icon FlexRow">
							<u-icon name="arrow-right" color="#003232" size="25"></u-icon>
						</view>
					</view>
				</view>
				<view class="envelope_right FlexItem">
					<view class="envelope_item en_rig_top">
						<view class="tit">
							省钱套餐
						</view>
						<view class="contente">
							<view class="txt">
								出行必备福利
							</view>
							<view class="ebtn FlexRow style2">
								限时抢购
							</view>
						</view>
					</view>
					<view class="envelope_item en_rig_bot">
						<view class="tit">
							领券优惠券
						</view>
						<view class="contente">
							<view class="txt">
								最高抵扣10元
							</view>
							<view class="ebtn FlexRow ">
								立即去抢
							</view>
						</view>
					</view>
				</view>
			</view> -->

			<view class="coupon-box flex row-between" @click="toPath('/bundle/pages/coupon_get/coupon_get')">
				<view class="flex">
					<u-image :lazy-load="true" :src="xtcimg_head + 'coupon-icon.png'" mode="widthFix" width="98rpx"
						height="100rpx">
					</u-image>
					<view class="m-l-20">
						<view class="title">领券优惠券</view>
						<view class="desc">出行乘车优惠券等您领取</view>
					</view>
				</view>
				<view class="btn">立即领券</view>
			</view>

			<view class="index_ptit">
				关于平台
			</view>
			<view class="home_area3 FlexBetween">
				<view class="envelope_item " @click="toPath('/bundle4/pages/index/introduce')">
					<view class="tit">
						关于粤顺行
					</view>
					<view class="info FlexBetween">
						<view class="imgicon icon1">
							<u-image :lazy-load="true" :src="xtcimg_head + 'index4-1.png'" mode="widthFix" width="100%"
								height="100%">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
						<view class="contente">

							<view class="txt">
								安全出行保障
							</view>
							<view class="ebtn FlexRow style2">
								了解更多
							</view>
						</view>
					</view>

				</view>
				<view class="envelope_item " @click="toPath('/bundle4/pages/driver/driverlist')">
					<view class="tit">
						车辆和司机
					</view>
					<view class="info FlexBetween">
						<view class="imgicon icon2">
							<u-image :lazy-load="true" :src="xtcimg_head + 'index4-2.png'" mode="widthFix" width="100%"
								height="100%">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>

						<view class="contente">

							<view class="txt">
								严选车辆司机
							</view>
							<view class="ebtn FlexRow style2">
								立即查看
							</view>
						</view>
					</view>

				</view>
			</view>


			<view class="index_ptit">
				客服信息
			</view>
			<view class="home_area3 FlexBetween">

				<view class="envelope_item style2"
					@click="toPath('/bundle/pages/artificial_service/artificial_service')">
					<view class="tit">
						在线客服

					</view>
					<view class="info FlexBetween">
						<view class="imgicon icon3">
							<u-image :lazy-load="true" :src="xtcimg_head + 'index5-1.png'" mode="widthFix" width="100%"
								height="100%">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
						<view class="contente">

							<view class="txt">
								为你提供服务

							</view>
							<view class="ebtn FlexRow style3">
								联系客服
							</view>
						</view>
					</view>

				</view>
				<view class="envelope_item style2" @click="toPath('/bundle4/pages/index/problem')">
					<view class="tit">
						常见问题
					</view>
					<view class="info FlexBetween">
						<view class="imgicon icon4">
							<u-image :lazy-load="true" :src="xtcimg_head + 'index5-2.png'" mode="widthFix" width="100%"
								height="100%">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
						<view class="contente">

							<view class="txt">
								常见问题解答
							</view>
							<view class="ebtn FlexRow style3">
								立即查看
							</view>
						</view>
					</view>

				</view>
			</view>

		</view>

		<tabbar />

	</view>
</template>

<script>
	import {
		apiIndex
	} from "@/api/store";
	import {
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	import indexnav from "./components/indexnav.vue"



	export default {
		components: {
			indexnav,
		},
		data() {
			return {
				xtcimg_head: '',


				confirm_address: '',
				destination: '',

				pagesData: [],
				styles: {},
				tempData: '',
				loading: true,
			}
		},
		onLoad() {
			this.initialization()
			this.xtcimg_head = this.$store.state.app.imghead + 'index/'

		},
		// 下拉刷新
		onPullDownRefresh() {
			this.initialization();
		},
		methods: {
			initialization() {
				// setTimeout(()=>{
				// 	if(this.$refs.ref_map) {
				// 		this.$refs.ref_map.judgeGps()
				// 	}
				// }, 1500)
				this.getPageInfo()
			},

			getPageInfo() {
				apiIndex()
					.then((res) => {
						const {
							common: {
								title
							},
							common,
							content,
						} = this.$zhTran(res);

						uni.setNavigationBarTitle({
							title,
						});
						this.styles = common;
						this.tempData = content.map((item, index) => {
							return {
								index,
								value: item,
							};
						});
						this.splitSetData();
					})
					.finally(() => {
						uni.stopPullDownRefresh();
						this.loading = false;
					});
			},
			splitSetData() {
				const item = this.tempData.shift();
				if (!item) return;
				this.$set(this.pagesData, item.index, this.$zhTran(Object.freeze(item.value)));
				setTimeout(() => {
					this.splitSetData();
				}, 100);
			},


			toPath(url) {
				if (!url) return
				uni.navigateTo({
					url,
				})
			},

			// 地图返回详情地址
			raddress(obj) {
				let {
					formatted_address,
					jianchen,
					taddress,
					location,
				} = obj
				this.confirm_address = {
					formatted_address, // 详细地址
					jianchen, // xxx省xx市xx区
					taddress, // 除去头部的尾部地址
					location, // 经纬度字符串 '112.85048,22.780062'
				}
			},
			// 去哪 点击调起地图选择位置
			WhereTo() {
				uni.showLoading({
					title: '加载中',
				})
				// #ifdef H5
				//该代码仅在h5中生效
				uni.chooseLocation({
					success: (res) => {
						let {
							address,
							latitude,
							longitude,
						} = res
						this.destination = {
							address,
							latitude,
							longitude
						}
					}
				})
				// #endif

				// #ifdef MP
				//该代码仅在小程序中生效
				var that = this
				uni.authorize({
					scope: 'scope.userLocation',
					success: (res) => {
						uni.chooseLocation({
							success: (res) => {
								console.log('res', res)
								let {
									address,
									latitude,
									longitude,
								} = res
								that.destination = {
									address,
									latitude,
									longitude
								}
							}
						});
					},
					fail: (err) => {
						console.log(err)
						that.authorization()
					},
					complete: () => {
						uni.hideLoading()
					}
				})
				// #endif
			},

			// 用户拒绝授权，再次授权
			authorization() {
				uni.showModal({
					title: '需要获取您的定位授权',
					content: '否则部分功能将无法使用,是否允许获取您的位置信息?',
					confirmText: '去设置',
					success: (res) => {
						if (!res.confirm) return
						uni.openSetting({
							success: (res) => {
								if (res.authSetting['scope.userLocation']) {
									// 授权成功
									uni.showToast({
										title: '授权成功',
										icon: 'none'
									})
								} else {
									// 未授权
									uni.showToast({
										title: '授权失败',
										icon: 'none'
									})
								}
							},
						})
						// success
					},
					// showModal
				})
				// 
			},


		},
	}
</script>
<style lang="scss" scoped>
	.OuterBox {
		width: 100% !important;
		padding: 20rpx;
		background: #fff;
	}

	.coupon-box {
		background-color: rgba(228, 246, 246, 1);
		padding: 20rpx 40rpx;
		border-radius: 16rpx;

		.title {
			font-size: 34rpx;
			font-weight: bold;
		}

		.desc {
			font-size: 22rpx;
			margin-top: 10rpx;
		}

		.btn {
			font-size: 22rpx;
			color: rgba(0, 50, 50, 1);
			padding: 10rpx 30rpx;
			background-color: #fff;
			border-radius: 50rpx;
			border: 1rpx solid rgba(218, 235, 235, 1);
		}
	}

	.banner_home {
		width: 100%;
		height: 200rpx;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.map_box {
		width: 100%;
		position: relative;
		padding-top: 400rpx;
		margin-bottom: 43rpx;

		.map_container {
			width: 100%;
			height: 448rpx;
			border-radius: 16rpx;
			overflow: hidden;
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
		}

		.origin {
			&::before {
				content: '';
				display: inline-block;
				width: 14rpx;
				height: 14rpx;
				margin-right: 14rpx;
				border-radius: 100%;
				background: rgba(10, 175, 115, 1);
			}

			&.color_End::before {
				background: #F5AD03;
			}
		}

		.map_control {
			position: relative;
			z-index: 3;
			padding: 0 22rpx;
			width: 100%;

			.control_outer {
				width: 100%;
				min-height: 212rpx;
				border-radius: 18rpx;
				background: #FFFFFF;
				box-shadow: 0px 12rpx 16rpx #E4E7EE;
				padding: 0 30rpx 28rpx 30rpx;
			}

			.location_rise {
				font-size: 26rpx;
				font-weight: 700;
				color: rgba(10, 175, 115, 1);
				min-height: 98rpx;
				padding: 38rpx 0 28rpx 0;
				padding: 0 20rpx;
			}

			.location_End {
				font-size: 34rpx;
				font-weight: 700;
				color: rgba(12, 14, 13, 1);
				width: 100%;
				height: 86rpx;
				border-radius: 12rpx;
				background: #F6F8FB;
				padding: 0 20rpx;
			}
		}
	}



	.envelope_box {
		height: 416rpx;

		.envelope_left {
			padding: 32rpx;
			border-radius: 18rpx;
			overflow: hidden;
			width: 348rpx;
			height: 100%;
			border-radius: 18rpx;
			background: #E4F6F6;
			border: 2rpx solid #E9F2F2;
			background: url("https://xtc.kshop.cc/resource/image/shopapi/mobile_img/index/index3-1.jpg") no-repeat;
			background-size: cover;
			background-position: center;

			.tit {
				font-size: 34rpx;
				font-weight: 700;
				color: rgba(38, 38, 38, 1);
			}

			.txt {
				font-size: 20rpx;
				font-weight: 400;
				color: rgba(35, 35, 35, 1);
			}

			.en_leftbtn {
				margin-top: 220rpx;
				width: 198rpx;
				height: 62rpx;
				border-radius: 200rpx;
				// background: linear-gradient(90deg, #589FFC 0%, #015CD6 100%);
				// box-shadow: 6rpx 10rpx 12rpx  rgba(57,117,225,.2);


				background: linear-gradient(90deg, #006363 0%, #003232 100%);
				box-shadow: 6rpx 10rpx 6rpx #00323227;

				.span {
					font-size: 25rpx;
					font-weight: 700;
					color: #E6FF28;
					text-align: center;
					margin-top: -3rpx;
				}

				padding: 8rpx;

				.icon {
					margin-left: 6rpx;
					width: 48rpx;
					height: 48rpx;
					border-radius: 100%;
					background: #E6FF28;

				}
			}
		}

		.envelope_right {
			height: 100%;
			padding-left: 14rpx;

			.envelope_item {

				border: 2rpx solid rgba(233, 242, 255, 1);
				padding: 28rpx;

				.contente {
					margin-top: 28rpx;
					padding-left: 137rpx;
				}
			}

			.en_rig_top {
				margin-bottom: 14rpx;
				background: url("https://xtc.kshop.cc/resource/image/shopapi/mobile_img/index/index3-2.jpg") no-repeat;
				background-size: cover;
				background-position: center;
			}

			.en_rig_bot {
				background: url("https://xtc.kshop.cc/resource/image/shopapi/mobile_img/index/index3-3.jpg") no-repeat;
				background-size: cover;
				background-position: center;
			}
		}
	}

	.envelope_item {
		border-radius: 18rpx;
		overflow: hidden;
		padding: 28rpx;
		height: 200rpx;
		width: 348rpx;

		.tit {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(38, 38, 38, 1);
		}

		.info {
			margin-top: 25rpx;
			width: 100%;

			.contente .ebtn {
				margin-top: 10rpx;
			}
		}

		.contente {
			.txt {
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(38, 38, 38, 1);
			}

			.ebtn {
				margin-top: 12rpx;
				width: 140rpx;
				height: 44rpx;
				border-radius: 200rpx;
				background: #FFFFFF;
				border: 2rpx solid #DBEDFF;
				font-size: 22rpx;
				font-weight: 400;
				color: #003232;
				text-align: center;

				&.style2 {
					color: #E6FF28;
					border: none;
					// background: linear-gradient(90deg, #589FFC 0%, #015CD6 100%);
					// 	box-shadow: 6rpx 10rpx 12rpx  rgba(57,117,225,.2);
					background: linear-gradient(90deg, #035959 0%, #003232 100%);
					box-shadow: 6rpx 10rpx 6rpx #00323227;
				}

				&.style3 {
					color: #E6FF28;
					border: none;
					// background: linear-gradient(90deg, #FF952B 0%, #F4AC00 100%);

					background: linear-gradient(90deg, #035959 0%, #003232 100%);
					box-shadow: 6rpx 10rpx 6rpx #00323227;

				}
			}
		}
	}

	.index_ptit {
		margin: 44rpx 0 22rpx 0;
		font-size: 34rpx;
		font-weight: 700;
		color: rgba(0, 0, 0, 1);
	}

	.home_area3 {
		width: 100%;

		.envelope_item {

			background: linear-gradient(180deg, #E1F5F5, #FFFFFF);


			// background: linear-gradient(180deg, #F0F7FF, #FFFFFF);
			border: 2rpx solid #E9F2F2;

			&.style2 {
				// background: linear-gradient(180deg, #FFF2EC, #FFFFFF );
				// border: 2rpx solid #FFEBE6;
			}

			.icon1 {
				width: 108rpx;
			}

			.icon2 {
				width: 110rpx;
			}

			.icon3 {
				width: 92rpx;
			}

			.icon4 {
				width: 82rpx;
			}
		}
	}
</style>